<template>
  <div>
    <myheader></myheader>
    <div id="carousel" class="carousel slide" data-ride="carousel">
      <!-- <ul class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
      </ul> -->

      <div class="carousel-inner">
        <!--Text only with background image-->
        <!-- <div class="carousel-item active">
          <div class="container slide-textonly">
            <div>
              <h1>York &amp; Smith</h1>
              <p class="lead">Spring/Summer 2018 Collection</p>
              <a href="#" class="btn btn-outline-secondary">View Collection</a>
            </div>
          </div>
        </div> -->

        <!-- 幻灯片组件 -->
        <Carousel
          :height="700"
          :datas="params"
          pageTheme="circle"
          @click="click"
        >
        </Carousel>
      </div>
    </div>
    <section class="collections text-center ">
      <div class="container-fluid">
        <div class="row">
          <div class="collection col-md-6 alt-background">
            <div class="container container-right text-center">
              <div>
                <h1>Women's</h1>
                <p class="lead">Spring/Summer 2018 Collection</p>
                <a href="catalog.html" class="btn btn-outline-secondary"
                  >Browse Women's</a
                >
              </div>
            </div>
          </div>
          <div class="collection col-md-6 bg-secondary inverted">
            <div class="container container-left text-center">
              <div>
                <h1>Men's</h1>
                <p class="lead">Spring/Summer 2018 Collection</p>
                <a href="catalog.html" class="btn btn-outline-white"
                  >Browse Men's</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="featured-block text-center">
      <div class="container">
        <div class="row justify-center">
          <div class="col-md-6 text-center">
            <img
              class="mt-4 mb-4 img-fluid"
              src="../assets/images/placeholder-jacket.png"
              style="width: 100%;"
            />
          </div>
          <div class="col-md-6 text-center text-md-left">
            <h2 class="mb-3">Spring/Summer Collection 2018</h2>
            <p class="lead mt-2 mb-3">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse cursus erat sed sem sagittis cursus.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed
              odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam
              porta sem malesuada magna mollis euismod.
            </p>
            <a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
          </div>
        </div>
      </div>
    </section>

    <section class="products text-center">
      <div class="container">
        <h3 class="mb-4">商品展示</h3>
        <div class="row">
          <!-- 遍历商品列表 -->
          <div
            class="col-sm-6 col-md-3 col-product"
            v-for="(item, index) in data_list"
            :key="index"
          >
            <figure>
              <img
                class="rounded-corners img-fluid"
                :src="'http://localhost:8000/static/upload/' + item.img + ''"
                width="240"
                height="240"
              />
              <figcaption>
                <div class="thumb-overlay">
                  <a href="item.html" title="More Info">
                    <i class="fas fa-search-plus"></i>
                  </a>
                </div>
              </figcaption>
            </figure>
            <h4>
              <router-link :to="{ path: '/item', query: { gid: item.id } }">{{
                item.name
              }}</router-link>
            </h4>
            <p>
              <span class="emphasis">${{ item.price }}</span>
            </p>
          </div>
        </div>
        <!-- 分页逻辑 -->
        <br />
        <div>
            <Pagination
            v-model="pagination"
            @change="change"
            align="center"
          ></Pagination>
          <!-- 手写分页器 -->
          <!-- <div id="pagination">
            <Button @click="change(1)">第一页</Button>
            <Button @click="change('last')" v-if="page != 1">上一页</Button>
            <Button
              @click="change('next')"
              v-if="page != parseInt(total / size) + 1"
              >下一页</Button
            >
            <Button @click="change('total')">尾页</Button>
            <input
              type="text"
              v-model="page"
              v-if="page <= parseInt(total / size) + 1"
            />
          </div> -->
        </div>
        <br />
      </div>
    </section>

    <div class="divider"></div>

    <section class="cta text-center">
      <div class="container">
        <h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
        <form class="subscribe">
          <div class="form-group row pt-3">
            <div class="col-sm-8 mb-3">
              <input
                type="text"
                class="form-control"
                id="inputName"
                placeholder="Your Name"
              />
            </div>
            <div class="col-sm-4">
              <button type="submit" class="btn btn-lg btn-outline-primary">
                Sign me up
              </button>
            </div>
          </div>
        </form>
      </div>
    </section>
    <myfooter></myfooter>
  </div>
</template>



<script>
import myheader from "./myheader";
import myfooter from "./myfooter";

export default {
  data() {
    return {
      // 幻灯片数据
      params: [],
      // 商品列表
      data_list: [],
      // 分页器变量
      pagination: {
        page: 1,
        size: 4,
        total: ''
      },
      // page: 1,
      // size: 4,
      // total: ""
    };
  },
  mounted: function() {
    // 获取幻灯片列表
    this.axios({
      url: "http://localhost:8000/showpics/"
    }).then(res => {
      if (res.data.code == 405) {
        this.$Message(res.data.msg);
      } else {
        this.params = res.data;
      }
    });

    // 请求商品接口
    this.axios({
      url: "http://localhost:8000/goodslist/",
      params: { page: this.page, size: this.size }
    }).then(res => {
      this.data_list = res.data.data;
      this.pagination.total = res.data.total;
    });
  },
  methods: {
    // 幻灯片点击事件
    click: function(index, data) {
      // 点击后跳转具体页面
      window.location.href = data.link;
    },
    // 分页器事件
    change: function() {
      // 请求商品接口;
      this.axios({
        url: "http://localhost:8000/goodslist/",
        params: { page: this.pagination.page, size: this.pagination.size }
      }).then(res => {
        this.data_list = res.data.data;
      });
    }
    // change: function(page) {
    // 请求商品接口
    // if (page == "next") {
    //   page = this.page + 1;
    // }
    // if (page != Math.ceil(this.total / this.size)) {
    //   if (page == "last") {
    //     page = this.page - 1;
    //   }
    // }
    // if (page == "total") {
    //   if (this.total % this.size == 0) {
    //     page = this.total / this.size;
    //   } else {
    //     page = parseInt(this.total / this.size) + 1;
    //   }
    // }
    // this.axios({
    //   url: "http://localhost:8000/goodslist/",
    //   params: { page: page, size: this.size }
    // }).then(res => {
    //   this.page = page;
    //   this.data_list = res.data.data;
    //   this.total = res.data.total;
    // });
    // }
  },
  components: {
    myheader: myheader,
    myfooter: myfooter
  }
};
</script>

<style>
</style>